<extend name="Public:template" />
<block name="page_body">
<!-- 商品列表页面  -->
<include file="Public:header_productsearch"/>
<notempty name="search.spread">
<div class="row ">
	<ul class="mt5">
	<li class="col-xs-3 col-sm-3 "><a class="img-thumbnail active" href="{:U('Product/index',array('spread'=>'new'))}">新品上架</a></li>
	<li class="col-xs-3 col-sm-3 "><a class="img-thumbnail" href="{:U('Product/index',array('spread'=>'rmd'))}">热销排行</a></li>
	<li class="col-xs-3 col-sm-3 "><a class="img-thumbnail" href="{:U('Product/index',array('spread'=>'frn'))}">礼包促销</a></li>
	</ul>
</div>
</notempty>
<notempty name="search.cate_code_list">
	<ul class="row mt5 text-left">
		<volist name="search.cate_code_list" id="val">
			<li class="col-xs-3 col-sm-3"><a class="btn active <if condition="$search['cate_code'] eq $key">btn-danger<else/>btn-default</if>" href="{:U('Product/index',array('cate_code'=>$key))}">{$val}</a></li>
		</volist>
	</ul>
	<hr/>
</notempty>

<div class="productList" id="productListView">
</div>
<div id="noData" style="display:none;text-align:center">
	<a href="#">对不起，让您白找了一次!</br>要不试试输入其它相关商品名</a>
</div>
<div class='morePageBtn' style="display:none">
	<a href="#">显示更多商品</a>
</div>
<div class="loadingData" style="text-align:center; margin-top:10px;display:none;"  >
	<img src="__ROOT__/statics/mobile/images/ajax_loading.gif">
</div>
<form method="get" action="{:U('Product/list')}" name="form_search" id="form_search">
	<input type="hidden" name="name"   value="{$search.name}"/>
	<input type="hidden" name="cate_code" value="{$search.cate_code}" />
	<input type="hidden" name="spread" value="{$search.spread}" />
</form>
</block>
<block name="script_footer">
<!-- 商品显示模板  -->
<script type="text/javascript" src="__ROOT__/statics/mobile/scripts/template.min.js"></script>
<script id="productTmpl" type="text/html">
<dl>
	<dt class="pull-left">
		<a href="#" onclick="return false;">
			<img class="lazy"  src="<%=pic%>"/>
		</a>
	</dt>
	<dd>
		
			<h5><a href="#" onclick="return false;"><%=name%> <%=spec%></a></h5>
			<p class="promTags"></p>
			<p class="price">
				<span class="now">¥<%=price_real%></span>
				<span class="old">¥<%=price_sale%></span>
			</p>
		
		<span class="cartItemNum alert-info" id="itemNum<%=prod_id%>"></span>
		<span class="cartLoadingBtn"  id="cartLoadingBtn<%=prod_id%>" style="display:none">
			<img  src="__ROOT__/statics/mobile/images/ajax_loading.gif">
		</span>
		<a class="cartAddBtn" id="cartAddBtn<%=prod_id%>" href="javascript:addToCart('<%=prod_id%>','1','1');" ></a>
	</dd>
</dl>
</script>
<script type="text/javascript">
$(document).ready(function(){
	searchProduct();
	//输入搜索条件自动查询数据
	$(".morePageBtn").on( "click", function(event, ui) {
		searchProduct();
		return false;
	});
})
function searchProduct(){
	$(".morePageBtn").hide();
	$("#noData").hide();
	$(".loadingData").clone().appendTo("#productListView");
	$("#productListView .loadingData").show();
	if($("#form_search").attr('action')!=''){
		$.ajax({
	        'url': $("#form_search").attr('action'),
	        'dataType': "json",
	        'data': $('#form_search').serialize(),
	        'success': function (data) {
	        	var list = data['list'];
	        	var page = data['page'];
	        	$.each(list,function(i,item){
	        		var productItemHtml = template.render('productTmpl', item);
	        		$(productItemHtml).appendTo("#productListView");
	        	});
	        	$("#form_search").attr('action',page['downPageUrl'])
	        	if(page['totalPages']==page['nowPage']){
	        		$(".morePageBtn").hide();
	        	}else{
	        		$(".morePageBtn").show();
	        	}
	        	$("#productListView .loadingData").remove();
	        	if($("#productListView dl").length==0){
	        		$("#noData").show();
	        	}
	        }
	    });
		
	}

}
function addToCart(prod_id,num,edittype){
	$("#cartLoadingBtn"+prod_id).show();
	$("#cartAddBtn"+prod_id).hide();
	$.ajax({
        'url': "/cart/doadd.html",
        'dataType': "json",
        'data': {'prod_id':prod_id,'num':num,'edittype':edittype},
        'success': function (data) {
        	if(data['error']=='0'){
            	var cart_num = data['cart_num'];
            	var item_num = data['item_num'];
            	$("#cartNum").html(cart_num);
            	
            	$("#itemNum"+prod_id).html("×"+item_num);
            	$("#itemNum"+prod_id).addClass('badge');
            	if(data['message']!=""){
            		alert(data['message']);
            	}
        	}else{
        		alert(data['message']);
        	}
        	$("#cartLoadingBtn"+prod_id).hide();
        	$("#cartAddBtn"+prod_id).show();
        	
        }
    });
}
</script>
</block>